//  tag
//  ---------------------

$tag-bg				: #ddd !default;
$tag-warning-bg 	: $warning-bg !default;

//  <em class="tag tag--warning">Inactive</em>

.tag, %tag {
	padding: 0.25em 0.5em;
	display: inline-block;
	font-style: normal;
	font-size: 10px;
	text-transform: uppercase;
	color: rgb(50,50,50);
	color: rgba(0,0,0,0.8);
	@include border-radius(2px);
}

.tag--info {
	@extend %tag;
	background-color: $tag-bg;
}
.tag--warning {
	@extend %tag;
	background-color: $tag-warning-bg;
}

// badge icon the top-right corners
// container must have position: relative
.badge {
	@extend %tag;
	position: absolute;
	top: -3px;
	right: -3px;
}